<template>
    <!-- <van-popup class="myaddresspop" v-model:show="showArea" position="bottom"> -->
        <my-dailog v-model:show="showArea" :showtopclose="true" :styleType="3" @close="closePop">
        <van-cascader
            class = "myareaSelectCotaner"
            v-model="cascaderValue"
            title=""
            :show-header="false"
            placeholder="Select"
            :closeable="false"
            :options="guojiaList"
            @close="closePop"
            @finish="onFinish"
            :field-names="fieldNames"
            @change="onChange"
        />
    </my-dailog>
    <!-- </van-popup> -->
</template>

<script>
import { reactive,toRefs,getCurrentInstance,onMounted,computed } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import { 
    Cascader as vanCascader,
    Popup as vanPopup
} from 'vant';
import myDailog from './myDailog.vue';
export default {
    components:{
        vanPopup,
        vanCascader,
        myDailog
    },
    props:{
        modelValue:''
    },
    emits:{  // teleport后，出发事件需要emits申明（vue3+）
        'close':null,
        'finish':null,
        'update:modelValue':null
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            orderInfo:computed(()=>store.state.shop.orderInfo),
            cascaderValue:'',
            fieldNames:{
                text: 'name',
                value: 'areaId',
                children: 'children',
            },
            areaList: [],
            showArea:true,
            guojiaList:[],
            lists:[]
        })

        onMounted(()=>{
            store.dispatch('shop/get_area_list',{
                limit: 10000,
				page: 1
            }).then(res=>{
                state.lists = res.data
                state.guojiaList = getLevelData(2)  // 获取国家数据
            })
        })
        const getSubData = (parentId)=>{ // 按照父级id获取子集
            if(state.lists && state.lists.length>0){
                let nodes = []
                state.lists.forEach(item => {
                    if(item.parentId==parentId){
                        nodes.push(item)
                    }
                });
                return nodes
            }else{
                return []
            }
        }
        const getLevelData = (level)=>{ // 按照level来获取集合
            if(state.lists && state.lists.length>0){
                let nodes = []
                state.lists.forEach(item => {
                    if(item.level==level){
                        nodes.push(item)
                    }
                });
                return nodes
            }else{
                return []
            }
        }

        const onChange = (item)=>{
            if(item.tabIndex==0){
                const cItem = state.guojiaList.find(it => it.areaId==item.value)
                cItem.children = getSubData(item.value)  // 获取城市数据
            }
        }

        const onFinish = ({ selectedOptions }) => {
            let obj = {
                countryId:selectedOptions[0].areaId,
                countryName:selectedOptions[0].name,
                cityId:selectedOptions[1].areaId,
                cityName:selectedOptions[1].name
            }
            // store.commit('shop/set_orderInfo',{
            //     logisticsDeliveryCityId:selectedOptions[1].areaId,	//物流送货城市id
			// 	logisticsDeliveryCityName:selectedOptions[1].name,	//物流送货城市名称	
			// 	logisticsDeliveryCountryId:selectedOptions[0].areaId,	//物流送货国家ID
			// 	logisticsDeliveryCountryName:selectedOptions[0].name,	//物流送货国家名称
            // })
            context.emit('update:modelValue',obj)
            context.emit('finish',obj)
            closePop()
        }
        const closePop = ()=>{
            context.emit('close')
        }

        return{
            ...toRefs(state),
            onFinish,
            closePop,
            onChange
        }
    }
}
</script>

<style lang="scss" scoped>
    
</style>